<template>
    <a-layout class="layout-wrapper" :style="{ backgroundColor: backgroundColor }">
        <!-- 头部 -->
        <a-layout-header class="header-layout-wrapper">
            <div class="header-content" :style="{ width: headerWidth }">
                <!-- Logo -->
                <div class="logo-wrapper">
                    <h1>
                        <router-link :to="{ name : 'index' }">
                            <span class="logo"></span>
                            <span>吃惊开放平台</span>
                        </router-link>
                    </h1>
                </div>
                <!-- 左菜单 -->
                <div class="left-menu-wrapper" v-if="isShowMenu">
                    <a-menu mode="horizontal">
                        <a-menu-item class="ant-menu-item">
                            <router-link :to="{ name : 'console' }">控制台</router-link>
                        </a-menu-item>
                    </a-menu>
                </div>
                <!-- 右菜单 -->
                <div class="right-menu-wrapper" v-if="isShowMenu">
                    <!-- 已登录 -->
                    <a-menu v-if="$store.getters.isLogin" mode="horizontal">
                        <a-menu-item class="ant-menu-item">
                            <router-link :to="{ name : 'logout' }">退出</router-link>
                        </a-menu-item>
                    </a-menu>
                    <!-- 未登录 -->
                    <a-menu v-else mode="horizontal">
                        <a-menu-item class="ant-menu-item">
                            <a :href="$store.getters.getOauthAuthorizeUrl + '&callback=' + encodeURI($route.fullPath)">登录</a>
                        </a-menu-item>
                        <a-menu-item class="ant-menu-item">
                            <router-link :to="{ name : 'register' }">立即入驻</router-link>
                        </a-menu-item>
                    </a-menu>
                </div>
            </div>
        </a-layout-header>
        <!-- 内容 -->
        <a-layout-content class="content-layout-wrapper">
            <slot />
        </a-layout-content>
        <!-- 底部 -->
        <a-layout-footer class="footer-layout-wrapper" :style="{ position : footerPosition,backgroundColor: backgroundColor }">
            <div class="links">
                <a href="#">帮助</a>
                <a href="#">隐私</a>
                <a href="#">条款</a>
            </div>
            <div class="copyright">Copyright ©2020 Created by WFT. All Rights Reserved.</div>
            <a target="_blank" rel="nofollow" href="http://www.beian.miit.gov.cn">闽ICP备20001762号</a>
        </a-layout-footer>
    </a-layout>
</template>

<script>
    export default {
        props : {
            backgroundColor : { type : String, default : () => 'white' },
            headerWidth : { type : String, default : () => '100%' },
            footerPosition : { type : String, default : () => 'relative' },
            isShowMenu : { type : Boolean,default : () => true },
        }
    }
</script>

<style scoped>
    /* 头部 */
    .header-layout-wrapper{
        width: 100%;
        padding: 0;
        overflow: hidden;
        background-color: #FFFFFF;
        -webkit-box-shadow: 0 1px 10px #999;
        z-index: 1;
    }
    .header-content {
        width: 1200px;
        margin: 0 auto;
    }
    /* Logo */
    .logo-wrapper {
        float: left;
        padding-right: 65px;
        height: 58px;
        line-height: 58px;
        font-size: 18px;
    }
    .logo-wrapper h1{
        margin: 0 10px 0 24px;
    }
    .logo-wrapper a{
        color: #000000;
    }
    .logo-wrapper .logo {
        display: inline-block;
        width: 38px;
        height: 39px;
        margin: 13px 10px 0 0;
        background: url(https://cjlgb-design-oauth.cdn.bcebos.com/favicon.png) no-repeat;
        background-size: 95% 95%;
        vertical-align: top;
    }
    /* 左菜单 */
    .left-menu-wrapper{
        float: left;
    }
    /* 右菜单 */
    .right-menu-wrapper{
        float: right;
    }
    .ant-menu-item {
        height: 64px;
        line-height: 64px;
    }
    /* 底部 */
    .layout-wrapper .footer-layout-wrapper{
        width: 100%;
        bottom: 0;
        padding: 20px 0;
        text-align: center;
        font-size: 14px;
    }
    .footer-layout-wrapper .links{
        margin-bottom: 8px;
    }
    .footer-layout-wrapper .links a:not(:last-child){
        margin-right: 40px;
    }
    .footer-layout-wrapper .links a,
    .footer-layout-wrapper .copyright{
        color: rgba(0,0,0,.45);
        margin-bottom: 5px;
    }
</style>
